<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
        .control {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
      }
      .input-text {
        font-size: 32px;
      }
      table {
          width: 100%;
      }
      td, th {
          padding: 10px;
      }
  </style>
  <title>robot</title>
</head>
<body>
  <div style="text-align:center;">
    <a href="config.html">Settings</a>
    <label for="slider">percent:</label>
    <input type="number" id="percent" name="slider" min="0" max="100" step="1" value="1"><br>
  </div>
  <div style="text-align: center;Background-color:gray;">
    <img src="/video"/>
    <!--
    <iframe id="inlineFrameExample" title="Inline Frame Example" style="width:100%; height:600px;" src="streaming.html"> </iframe>
    <iframe id="inlineFrameExample" title="Inline Frame Example" style="width:90%; height:600px;" src="video.html"> </iframe>
    -->
  </div>
  <div style="position: fixed;
               bottom:40px; left:50%; transform: translateX(-50%);
               width: 240px; height: 200px;
               background-color: rgba(255, 255, 255, 0);
        z-index: 999;">
  <br>
  <table style="margin-left: auto; margin-right: auto;">
    <tr>
      <td> </td>
      <td> </td>
      <td>
        <input class="input-text" type="submit" id="up" value="&uarr;">
      </td>
    </tr>
    <tr>
      <td>
        <input class="input-text" type="submit" id="left" value="&larr;">
      </td>
      <td>-</td>
      <td>
        <input class="input-text" type="submit" id="stop" value="&#x23F9;">
      </td>
      <td>-</td>
      <td>
        <input class="input-text" type="submit" id="right" value="&rarr;">
      </td>
    </tr>
    <tr>
      <td> </td>
      <td> </td>
      <td>
        <input class="input-text" type="submit" id="down" value="&darr;">
      </td>
    </tr>
  </table>
  </div>
  <div style="text-align: center;">
    <p>8300.github.io &copy; <a href="http://8300.github.io">8300</a> 2024-2024</p>
  </div>
  <script>
    var loop_time = 10;//ms
    function robot_request(cmd, percent) {
      var dev = document.createElement("dev");
      dev.setAttribute("cmd", cmd);
      dev.setAttribute("percent", percent);
      dev.setAttribute("usec", loop_time*1000);
      const xmlString = (new XMLSerializer()).serializeToString(dev);

      var url = "robot";
      console.log("[request]", url, ",cmd:", cmd, ",percent:", percent);
      var xhr = new XMLHttpRequest();
      xhr.open("POST", url, true);
      xhr.send(xmlString);
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
          console.log("[response]", xhr.responseText);
      //    resultDiv.innerHTML = xhr.responseText;
        }
      };
    }
    function robot_common_turn(name) {
      var button = document.getElementById(name);
      if (button.matches(':active')) {
        console.log('active');
      } else {
        console.log('inactive');
      }
      var percent = document.getElementById("percent").value;
      robot_request(name, percent)
    }
    function robot_advance() {
      robot_common_turn('up');
    }
    function robot_retreat() {
      robot_common_turn('down');
    }
    function robot_left_turn() {
      robot_common_turn('left');
    }
    function robot_right_turn() {
      robot_common_turn('right');
    }
    function robot_stop() {
      robot_common_turn('stop');
    }
    function isMobile() {
      return /Mobi|Android/i.test(navigator.userAgent);
    }
    console.log('ismobile', isMobile());
    function listener(id, callback) {
      var button = document.getElementById(id);
      if (isMobile()) {
        button.addEventListener("touchstart", function() {
          callback();
          this.interval = setInterval(callback, loop_time*0.8);//ms
        });
        button.addEventListener("touchend", function() {
          robot_stop();
          clearInterval(this.interval);
        });
      } else {
        button.addEventListener("mousedown", function() {
          callback();
          this.interval = setInterval(callback, loop_time*0.8);//ms
        });
        button.addEventListener("mouseup", function() {
          robot_stop();
          clearInterval(this.interval);
        });
      }
    }
    listener("up", robot_advance);
    listener("down", robot_retreat);
    listener("left", robot_left_turn);
    listener("right", robot_right_turn);
    listener("center", robot_stop);
  </script>
</body>
</html>

